<template>
  <div>
    <div class="flex-block haad">
      <section>
        <div
          class="info-block"
          :span="3"
          v-for="(item, index) in headList"
          :key="index"
        >
          {{ item }}
        </div>
      </section>
      <div class="button-area">操作</div>
    </div>
    <div class="no-area" v-if="ruleForm.paramList.length==0">
       暂无数据
    </div>
    <div
      class="flex-block"
      v-for="(item, index) in ruleForm.paramList"
      :key="index"
    >
      <section>
        <div class="info-block">
          <el-input v-model="item.name" placeholder="参数" />
        </div>
        <div class="info-block">
          <el-select v-model="item.type" placeholder="参数类型">
            <el-option
              v-for="(item, index) in typeList"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </div>
        <div class="info-block">
          <el-select v-model="item.notEmpty" placeholder="是否必填">
            <el-option
              v-for="(item, index) in inputList"
              :key="index"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="info-block">
          <el-input-number v-model="item.orderNum" />
        </div>
        <div class="info-block">
          <el-input v-model="item.desc" placeholder="描述" />
        </div>
        <div class="info-block">
          <el-input v-model="item.example" placeholder="示例值" />
        </div>
      </section>
      <div class="button-area">
        <b @click="deleteQuery(index)">-</b>
      </div>
    </div>
    <footer>
      <el-button type="primary" @click="handleCreate">+ 增加参数</el-button>
    </footer>
  </div>
</template>

<script>
import { defineComponent, watch, computed, ref } from "vue";
import { ElMessage } from "element-plus";
export default defineComponent({
  name: "WebviewRegisterEditRequestQuery",
  props: {
    modelValue: {
      type: Object,
      default: () => {},
    },
    rules: {
      type: Object,
      default: () => {},
    },
  },
  emits: ["update:modelValue", "handle-create", "handle-delete"],
  setup(props, { emit }) {
    const headList = ref([
      "参数",
      "参数类型",
      "是否必填",
      "参数顺序",
      "描述",
      "示例值"
    ]);
    const ruleForm = computed({
      get: () => props.modelValue,
      set: (val) => emit("update:modelValue", val),
    });
    const typeList = ref(["String", "Integer", "Double", "Date", "TimeStamp"]);
    const inputList = ref([
      { name: "是", value: true },
      { name: "否", value: false },
    ]);

    const handleCreate = () => {
      let canAdd = true;
      const query = { ...props.modelValue };
      query.paramList.map((item) => {
        (!item.name) && (canAdd = false)
      });
      if (canAdd) {
        query.paramList.push({
          name: null,
          notEmpty: true,
          type: "String",
          orderNum: 1,
          desc: null,
          example: null,
        });
      } else {
        ElMessage.warning("参数名不能为空");
      }
    };
    const deleteQuery = (index) => {
      const query = { ...props.modelValue };
      query.paramList.splice(index, 1);
    }
    return {
      headList,
      ruleForm,
      typeList,
      inputList,
      deleteQuery,
      handleCreate,
    };
  },
});
</script>

<style lang="scss" scoped>
.el-input-number {
  width: auto;
  min-width: 114px;
  .el-input__inner {
    padding-left: 32px;
    padding-right: 32px;
  }
}
.flex-block {
  display: flex;
  width: 100%;
  padding: 10px;
  border: 1px solid #eaf0f8;
  &.haad {
    background: #eaf0f8;
    
  }
  section {
    display: flex;
    width: calc(100% - 50px);
  }
  .button-area {
    width: 30px;
    text-align: center;
    b {
      display: inline-block;
      width: 20px;
      height: 20px;
      line-height: 16px;
      border-radius: 50%;
      background: rgba(255, 139, 58, 0.1);
      border: 1px solid #FF8B3A;
      color: #FF8B3A;
      text-align: center;
      font-size: 24px;
      margin-top: 8px;
    }
  }
  .info-block {
    width: 16%;
    & + .info-block {
      margin-left: 0.65%;
    }
  }
}
.no-area {
  height: 60px;
  line-height: 60px;
  text-align: center;
  border: 1px solid #eaf0f8;
}
footer {
  margin-top: 10px;
}
</style>
